<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 解决触摸延迟 */

        html {
            touch-action: manipulation;
        }

        html {
            font-size: 16px;
        }

        @media screen and (width: 320px) {
            html {
                font-size: 16px;
            }
        }

        @media screen and (width: 375px) {
            html {
                font-size: 18.75px;
            }
        }

        @media screen and (width: 414px) {
            html {
                font-size: 20.7px;
            }
        }

        @media screen and (width: 380px) {
            html {
                font-size: 19px;
            }
        }

        @media screen and (width: 360px) {
            html {
                font-size: 18px;
            }
        }

        #closeSign {
            position: absolute;
            height: 2.13333rem;
            width: 2.13333rem;
            top: 0;
            right: 0;
            background: url(../image/yunjing/mtxform/close-icon.svg) no-repeat center center/50% 50%;
        }

        #signArea {
            background: #FFF;
            height: 14.93333rem;
        }

        #signArea .title-a {
            height: 2.13333rem;
            line-height: 2.13333rem;
            background: #5FAEF0;
            color: #FFF;
            text-align: center;
            font-size: 18px;
            position: relative;
        }

        #signArea .content-wrap {
            padding: 10px;
        }

        #signArea .save-sign,
        #signArea .cancel-sign {
            height: 1.6rem;
            width: 4rem;
            font-size: 16px;
            border-radius: 2px;
            out-line: 0;
        }

        #signArea .save-sign {
            background: #5FAEF0;
            margin-right: 0.32rem;
            border: 0;
            color: #fff;
        }

        #signArea .cancel-sign {
            border: thin solid #DDD;
        }

        #signature {
            border: 1px solid #DDD;
            border-radius: 2px;
        }

        a[title="站长统计"] {
            display: none;
        }

        #signature {
            color: black;
            background-color: #ffffff;
        }

        #signWrap {
            position: fixed;
            z-index: 10000010;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.18);
            padding-top: 12vh;
            justify-content: center;
        }

        #signWrap.flex {
            display: flex;
        }

        .disable-touch {
            touch-action: none;
        }

        .none {
            display: none;
        }

        #imageViewBox {
            position: relative;
            height: 6.9rem !important;
            width: 12.3rem !important;
            margin: 4px auto 6px auto;
            border: thin solid #DCDCDC;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #imageViewBox img {
            width: 10.735rem;
            height: 5.728rem;
            border-radius: 8px;
        }

        .upload_img_preview img {
            width: 80px;
            height: 80px;
            margin: 10px;
        }

        #loadingStatus {
            background-color: rgb(92, 184, 92);
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
            background-size: 40px 40px;
            box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
            box-sizing: border-box;
            color: rgb(255, 255, 255);
            border-radius: 10px;
        }

        #signature {
            color: #000;
        }

        .store-num,
        .day {
            padding: 0 4px;
        }

        #user_sign_delete {
            position: absolute;
            top: 0;
            right: 0;
            width: 46px !important;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #FFF;
            background: #EF5D5E;
            border-radius: 6px;
            opacity: 0.92;
        }

        #mGrzxHeader .header-c {
            line-height: 1.3;
        }

        @media only screen and (min-width: 500px) {
            #signWrap {
                padding-top: 0;
                align-items: center;
            }
            #signArea {
                width: 500px;
                height: 300px;
            }
            #signArea .title-a,
            #closeSign {
                height: 40px;
                line-height: 40px;
            }
            #signArea .content-wrap {
                height: 260px;
                width: 500px;
                padding: 6px 6px 0 6px !important;
            }
            #signature {
                height: 208px;
                width: 486px;
                margin-bottom: 8px;
            }
            #signature canvas.jSignature {
                height: 206px !important;
                width: 484px !important;
            }
        }

        @media screen and (max-width: 500px) {
            #signArea {
                width: 352px;
                height: 260px;
            }
            #signArea .title-a,
            #closeSign {
                height: 38px;
                line-height: 38px;
            }
            #signArea .content-wrap {
                height: 198px;
                width: 352px;
                padding: 6px 6px 0 6px !important;
            }
            #signature {
                height: 172px;
                width: 340px;
                margin-bottom: 8px;
            }
            #signature canvas.jSignature {
                height: 170px !important;
                width: 338px !important;
            }
        }

        @media all and (orientation: landscape) {
            /*　　这是匹配横屏的状态，横屏时的css代码　　*/
            #signWrap {
                padding-top: 0;
                align-items: center;
            }
            #signArea {
                width: 500px;
                height: 300px;
            }
            #signArea .title-a,
            #closeSign {
                height: 40px;
                line-height: 40px;
            }
            #signArea .content-wrap {
                height: 260px;
                width: 500px;
                padding: 6px 6px 0 6px !important;
            }
            #signature {
                height: 208px;
                width: 486px;
                margin-bottom: 8px;
            }
            #signature canvas.jSignature {
                height: 206px !important;
                width: 484px !important;
            }
        }

        @media only screen and (width: 414px) {

            #signWrap {
                padding-top: 86px important;
                justify-content: center;
            }
            #signArea {
                width: 400px !important;
                height: 310px !important;
            }
            #signArea .title-a,
            #closeSign {
                height: 40px !important;
                line-height: 40px !important;
            }
            #signArea .content-wrap {
                height: 220px !important;
                width: 400px !important;
                padding: 6px 6px 0 6px !important;
            }
            #signature {
                height: 214px !important;
                width: 386px !important;
                margin-bottom: 8px !important;
            }
            #signature canvas.jSignature {
                height: 212px !important;
                width: 384px !important;
            }
        }
    </style>
</head>

<body>
    <div id="signWrap" class="none">

        <div id="signArea">
            <div class="title-a">
                <span>签&nbsp;名</span>
                <div id="closeSign"></div>
            </div>
            <div class="content-wrap">
                <div id="signature">

                </div>
                <div style="text-align: center;position:relative;">
                    <div id="loadingStatus" style="height:20px;position:absolute;left:0;top:-86px;width:0;">
                        <span style="position:absolute;top:-30px;left:50%;transform: translate(-50%, 0); min-width:90px;height:20px;font-size:14px;color:#5FAEF0;"></span>
                    </div>
                    <button type="button" onclick="jSignature_img()" class="save-sign">保存</button>
                    <button type="button" onclick="reset()" class="cancel-sign">取消</button>
                    <!-- <button type="button" id="c" class="cancel-sign">取消</button> -->
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/signature/hidpi-canvas.js"></script>
    <script type="text/javascript" src="js/signature/jSignature.js"></script>
    <script type="text/javascript" src="js/upload/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="js/upload/upload.js"></script>
    <script type="text/javascript" src="js/common/base64.min.js"></script>
    <script>
        $(function () {
            //患者签名
            $("#signStatusWrap").on("click", function () {
                $("#signWrap").show();
                $.ajaxSetup({
                    async: false
                });
                window.canvasIsEmpty = "Y" //用于判断是否有手写签名，默认是空，无签名.jSignature.js中开启画笔后就会改变这个值。
                var sigdiv = $("#signature");
                sigdiv.jSignature('init', {
                    height: '100%',
                    width: '100%',
                    color: "#000",
                    lineWidth: 6
                });

                $("#closeSign").on("click", function () {
                    reset();
                    $("#signWrap").removeClass("flex disable-touch");
                });

                //点击签名的图片和提示文字弹出签名的画板
                $("#imageViewBox").on("click", "#user_sign_img", function () {
                    getOSSAuth();
                    $("#loadingStatus").css({
                        "width": "0"
                    }); //进度条置零
                    $("#loadingStatus span").text(""); //清除进度显示文字
                    $("#signWrap").addClass("flex disable-touch");
                });

                //清除历史签名，从OSS上删除
                $("#imageViewBox").on("click", "#user_sign_delete", function () {
                    $.post("OSSAuth/yjsigndel.shtml", {
                        basename: basename
                    }, function (res) {
                        layer.msg("电子签名已删除");
                        $("#user_sign_img").attr("src", "image/sign_default.jpg");
                        $("#user_sign_delete").hide();
                    })
                })
            })
        })

        //患者签名重置
        function reset() {
            var $sigdiv = $("#signature");
            $sigdiv.jSignature("reset");
            if (window.canvasIsEmpty === "Y") {
                $("#signWrap").removeClass("flex");
            }
            window.canvasIsEmpty = "Y";
        }

        //保存签名
        function jSignature_img() {
            if (window.canvasIsEmpty === "Y") {
                layer.msg("请签名");
                return false;
            }
            var $sigdiv = $("#signature");
            var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式，具体可以参考官方文档
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            i.crossOrigin = "anonymous";
            window.signatureSrc = i.src;

            //封装blob对象  
            var blob = convertBase64UrlToBlob(i.src);
            upload(blob)
        }

        function convertBase64UrlToBlob(urlData) {
            var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
            //处理异常,将ascii码小于0的转换为大于0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            return new Blob([ab], {
                type: 'image/png'
            });
        }

        /* 图片上传 */
        var hostUrl = window.location.protocol + "//" + window.location.host + "/yunjingservice/";
        var basename = Base64.encodeURI("${user_name}");
        var accessid = '',
            policy = '',
            Signature = '',
            key = 'signature/${user_id.substring(0, 4)}_' + basename + '.png',
            host = '',
            expire = 0,
            now = 0;

        // 可以判断当前expire是否超过了当前时间，如果超过了当前时间，就重新取一下，3s 做为缓冲
        function getOSSAuth() {
            now = Date.parse(new Date()) / 1000;
            if (expire < now + 3) {
                $.post(hostUrl + "OSSAuth/yjsign.shtml", {
                    dir: "signature"
                }, function (data) {
                    //console.dir(data);
                    accessid = data.accessid;
                    policy = data.policy;
                    signature = data.signature;
                    expire = data.expire;
                    host = data.host;
                });
            }
        }

        function get_suffix(filename) {
            pos = filename.lastIndexOf('.')
            suffix = ''
            if (pos != -1) {
                suffix = filename.substring(pos)
            }
            return suffix;
        }

        function upload(blob) {
            getOSSAuth(); //获取授权
            var request = new FormData();
            request.append('OSSAccessKeyId', accessid);
            request.append('policy', policy);
            request.append('Signature', signature);
            request.append('key', key); //+filename
            request.append('success_action_status', '200'); //status头，如果不设置返回的是204
            request.append('Access-Control-Allow-Origin', '*');
            request.append('Access-Control-Allow-Methods', 'GET, POST');
            //request.append('file', $(".upload_input")[0].files[0]);
            request.append("fileData", blob); //fileData为自定义 
            request.append('file', blob);
            request.append("imageName", blob);
            var timer = null;
            $.ajax({
                url: host,
                data: request,
                processData: false,
                cache: false,
                async: false,
                contentType: false,
                //关键是要设置contentType 为false，不然发出的请求头 没有boundary
                type: "POST",
                beforeSend: function () {
                    var width = 1;
                    timer = setInterval(function () {
                        $("#loadingStatus").css({
                            "width": width + "%"
                        });
                        $("#loadingStatus span").text("上传中" + width + "%")
                        width++;
                        if (width == 98) {
                            clearInterval(timer)
                        }
                    }, 34)
                },
                success: function (data, textStatus, request) {
                    if (request.status == '200') {
                        reset();
                        clearInterval(timer)
                        $("#loadingStatus").css({
                            "width": "100%"
                        });
                        $("#signWrap").removeClass("flex");
                        $("#user_sign_delete").show();
                        $("#user_sign_img").attr("src", signatureSrc);
                        layer.msg('签名保存成功！');
                    } else {
                        layer.msg('上传失败，请重试！');
                        clearInterval(timer)
                        $("#loadingStatus").css({
                            "width": "0"
                        });
                        $("#loadingStatus span").text(" ")
                    }
                },
                error: function (data, textStatus, request) {
                    layer.msg('上传失败，请重试！');
                    clearInterval(timer)
                    $("#loadingStatus").css({
                        "width": "0"
                    });
                    $("#loadingStatus span").text(" ")
                },
                complete: function () {
                    $("#loadingStatus").css({
                        "width": "0"
                    });
                    $("#loadingStatus span").text(" ")
                }
            });
        }
        var signImgSrc = "https://biangene.oss-cn-shenzhen.aliyuncs.com/signature/${user_id.substring(0, 4)}_" +
            basename + ".png";
    </script>
</body>

</html>